<template>
	<view class="zone">
		<u-navbar :is-back="false" :height="60" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar2">
					<u-icon class="back" size="20px" color="#fff" @click="$p.back()" name="arrow-left"></u-icon>
					<view class="n_left">
						 <image  src="http://img.cpgm.cc/panda/static/game/tit.png" mode="widthFix" /> 
					</view>
				</view>
			</view>
		</u-navbar>

		<view class="main">
			<!-- @click="$p.navto('/pages/game/flyboyplay')" -->
			<view class="play" @click="$u.toast('即将正式上线')">玩法<u-icon name="arrow-right" color="#fff" size="25"></u-icon></view>
			<!-- 顶部飞机部分 -->
			<view class="top">
				<image :animation="animationData" class="boy" src="http://img.cpgm.cc/panda/static/game/boy.png" mode="widthFix" />
				<image class="bai"  :class="[!flydown?'visbility':'']" :animation="animationData" src="http://img.cpgm.cc/panda/static/game/bai.png" mode="widthFix" />

				<view class="posanum" v-if="gamestatus == 2 || gamestatus == 3">
					<p v-if="gamestatus == 3">飞走了</p>
					<text>{{eddval}}m</text>
					<!-- <u-count-to :use-easing="false" :start-val="starval" :decimals="1" :end-val="eddval" @end="end()"></u-count-to>
					<text></text> -->
				</view>

				<view class="posanum" v-if="gamestatus == 1">
					<p>下一期准备中</p>
					<text>{{second}}s</text>
					<!-- <u-count-to :use-easing="false" :start-val="starval" :decimals="1" :end-val="eddval" @end="end()"></u-count-to>
					<text></text> -->
				</view>
			</view>

			<!-- 中间记录部分 -->
			<view class="center">
				<!-- 历史记录弹窗 -->
				<view class="mymask" v-show="show">
					<view class="mask"></view>
					<view class="m_content">
						<view class="flexend">
								<view class="logitem lslog" @click="show = false"><text>历史记录</text><image src="http://img.cpgm.cc/panda/static/game/up.png" mode="widthFix" /></view>
						</view>
						<view class="flexwarp">
							<view class="logitem" v-for="(item , index) in history" :key="index">{{history[index]}}m</view>
						</view>
					</view>
				</view>
				
				<!-- 历史记录部分 -->
				<view class="log">
					<view class="flex1">
						<view class="logitem" v-for="(item , index) in history.slice(0,5)" :key="index">{{history[index]?history[index]:0}}m</view>
					</view>
					<view class="logitem lslog" @click="show = true"><text>历史记录</text><image src="http://img.cpgm.cc/panda/static/game/down.png" mode="widthFix" /></view>
				</view>
				<!-- tab部分 -->
				<view class="tab">
					<view v-for="(item,index) in tablist" :key="index" :class="[stat == item.id?'active':'']"
						@click="tabchange(item.id)">{{item.name}}</view>
				</view>

				<!-- 参与用户 -->
				<view v-show="stat == 1">
					<view class="expalin">
						<text>用户</text>
						<text>参与数量</text>
						<text>降落距离</text>
						<text>奖励数量</text>
					</view>

					<view class="list">
						<scroll-view scroll-y class="scrollbox">
							<view class="clist">
								<view class="item" v-for="(item , index) in list1" :key="index">
									<view class="info">
											<image
											:src="item.avatar?item.avatar:'http://img.cpgm.cc/panda/static/login/logo.png' "
											mode="widthFix" />
										<text>{{item.nickname?item.nickname:'潮玩新人'}}</text>
									</view>
									<view class="numbox">
										<image src="http://img.cpgm.cc/panda/static/home/sj.png" mode="widthFix" />
										<text>{{item.invest_num}}</text>
									</view>
									<view class="distance">
										{{Number(item.distance) == 0?'--':item.distance}}
									</view>
									<view class="rwnum">
										<image src="http://img.cpgm.cc/panda/static/home/sj.png" mode="widthFix" />
										<text>{{Number(item.income) == 0?'--':item.income}}</text>
									</view>
								</view>
								<view class="item" v-for="(item , index) in list2">
									<view class="info">
										<image
											:src="item.avatar?item.avatar:'http://img.cpgm.cc/panda/static/login/logo.png' "
											mode="widthFix" />
										<text>{{item.nickname?item.nickname:'潮玩新人'}}</text>
									</view>
									<view class="numbox">
										<image src="http://img.cpgm.cc/panda/static/home/sj.png" mode="widthFix" />
										<text>{{item.invest_num}}</text>
									</view>
									<view class="distance">
										{{Number(item.distance) == 0?'--':item.distance}}
									</view>
									<view class="rwnum">
										<image src="http://img.cpgm.cc/panda/static/home/sj.png" mode="widthFix" />
										<text>{{Number(item.income) == 0?'--':item.income}}</text>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

				<!-- 降落统计 -->
				<view v-show="stat == 2"> 
					<view class="timetab">
						<view v-for="(item,index) in tablist2" :key="index" :class="[stat2 == item.id?'active2':'']"
						@click="tabchange2(item.id)">{{item.name}}</view>
					</view>
					<view class="time_ex">这里可以查看{{stat2==1?'今日':stat2==2?'本月':'今年'}}前30条高度和具体发生时间</view>

					<scroll-view scroll-y class="scrollbox2">
						<view class="lsit2">
							<view class="item2" v-for="(item2 , index) in landinglist[stat2]" :key="index">
								<view class="howm">
									<view class="lv" v-if="index < 3">
										<image v-if=" index == 0 " src="http://img.cpgm.cc/panda/static/public/one.png" mode="widthFix" />
										<image v-if=" index == 1 " src="http://img.cpgm.cc/panda/static/public/two.png" mode="widthFix" />
										<image v-if=" index == 2 " src="http://img.cpgm.cc/panda/static/public/three.png" mode="widthFix" />
									</view>
									<view v-else class="lv">
										{{index+1}}
									</view>
									<text>{{item2.meters}}m</text>
								</view>
								<view class="time2">{{item2.created_at}}</view>
							</view>
						</view>
					</scroll-view>
				</view>


				<!-- 我的记录 -->
				<view v-show="stat == 3">
					<view class="expalin2">
						<text>参与数量</text>
						<text>降落距离</text>
						<text>奖励数量</text>
						<text>结束时间</text>
					</view>
					<view class="list">
						<scroll-view scroll-y class="scrollbox" @scrolltolower="scrolltolower">
							<view class="clist">
								<view class="item3" v-for="(item , index) in joinlog" :key="index">
									<view class="numbox">
										<image src="http://img.cpgm.cc/panda/static/home/sj.png" mode="widthFix" />
										<text>{{item.invest_num}}</text>
									</view>
									<view class="distance">
										{{Number(item.distance) == 0?'--':item.distance}}
									</view>
									<view class="rwnum">
										<text>{{Number(item.income) == 0?'--':item.income}}</text>
									</view>
									<view class="time3">{{item.created_at?item.created_at.substring(5,20):''}}</view>
								</view>
							</view>
							<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
						</scroll-view>
					</view>
				</view>
				
				<view class="bottom">
					<view class="formbox">
						<view class="f_left">
							<text>自动领奖</text>
							<u-switch class="switch" inactive-color="rgba(100,94,143,0.58)" :size="30" v-model="checked1" @change="reswchange()" :disabled="gamestatus == 2" ></u-switch>
							<view class="ipbox">
								<input type="number" :disabled="gamestatus == 2" v-model="setm"  @blur="handleBlur" />
								<text>m</text>
							</view>
						</view>	
						<view class="f_left">
							<text>自动参与</text>
							<u-switch class="switch" inactive-color="rgba(100,94,143,0.58)" :size="30" v-model="checked2" @change="swchange()"></u-switch>
						</view>	
					</view>
					
					<view class="join">
						<view class="j_left">
							<image src="http://img.cpgm.cc/panda/static/home/sj.png" mode="widthFix" />
							<view class="unumbox">
								<u-number-box v-model="value" :min="10" :max="10000" @blur="valChange" @minus="valChange" @plus="valChange"></u-number-box>
							</view>
						</view>
						<view class="button" v-if="isinvest == 0" @click="join()">参与</view>
						<view class="button grey" v-if="isinvest == 1" >参与成功</view>
						<view class="button grey" v-if="isinvest == 2" @click="join()">参与</view>
						<view class="button" v-if="isinvest == 3" @click="receive()">领取奖励</view>
						<view class="button grey" v-if="isinvest == 4" >参与</view>
					</view>

					<view class="residue">
						<p>当前拥有水晶： <text>{{crystal?crystal:'0'}}个</text> </p>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// 定义定时器，动画变量
var js , timer ,animation ,animation1 , timer2
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'transparent',
				},
				tablist: [{
						id: 1,
						name: '参与用户'
					},
					{
						id: 2,
						name: '降落统计'
					},
					{
						id: 3,
						name: '我的记录'
					},
				],
				tablist2: [{
						id: 1,
						name: '今日',
						type:'',
						isrequest:false,
					},
					{
						id: 2,
						name: '月度',
						type:'month',
						isrequest:false,
					},
					{
						id: 3,
						name: '年度',
						type:'year',
						isrequest:false,
					},
				],
				stat:1,
				stat2:1,
				animation:'',
				animationData: {},
				animationData1: {},
				syswidth:'',
				sppedtime:2000,//动画时间
				flydown:false,
				starval:0.0,
				eddval:1,
				setm:1.1,//默认投入的水晶
				checked1:false, // 自动领奖
				checked2:false, //自动参与
				value:1, // 本局投入的水晶数量
				show:false,
				crystal:'',
				gamestatus:0, // 1准备中 ，2开始飞行 3 结束飞行
				second:10,
				autojoin:false,//是否自动参与
				isinvest:0,//是否投入  0、未投入 1、我已投入 2、未投入已开局， 3，已投入 已开局
				list1:[], //我的
				list2:[],
				history:[], // 历史记录
				joinlog:'', //参加记录
				joinpage:1,
				joinmax_page:'',
				isclose:false,
				landinglist:{
					1:{},
					2:{},
					3:{}
				},
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
			};
		},
		onShow: function() {
			// 获取当前屏幕宽度
			uni.getSystemInfo({
				success:  (res)=> {
					// this.getinfo();
					
					// this.historyLog();
					this.syswidth = res.windowWidth
					if(this.syswidth > 480) {
						this.syswidth = 480
					}
					animation = uni.createAnimation({				
						duration: this.sppedtime,
						timingFunction: 'ease'				
					})
				}
			});
		},
		onLoad(){
			// this.getJoinLog();
		},
		// 监听页面卸载
		onUnload() {
			this.isclose = true
			uni.closeSocket()
			clearInterval(this.timer)
			this.timer = ''
		},
		
		onHide(){
			this.isclose = true
			uni.closeSocket()
			clearInterval(this.timer)
			this.timer = ''
		},

		methods: {
			// tab切换
			tabchange(id) {
				this.stat = id
				// if(id == 2 && !this.tablist2[0].isrequest) {
				// 	this.landing(this.tablist2[0].type , this.stat2)
				// }
			},
			// tab切换
			tabchange2(id) {
				this.stat2 = id
				// if(!this.tablist2[id - 1].isrequest) {
				// 	this.landing(this.tablist2[id - 1].type , this.stat2)
				// }
			},
			
			
			// 开局开始起飞
			starfly(width){
				let speedx = width / 2.4
				animation = uni.createAnimation({				
					duration: 4000,
					timingFunction: 'ease'				
				})
				animation.translate(speedx,'-13vh').step()
				this.animationData = animation.export()		
				this.flydown = true
				clearInterval(js)
				timer = setTimeout(()=>{
					var next = true
					clearInterval(js)
					js = setInterval(() => {
						if (next) {
							animation.translate(speedx,'-14vh').step()
						} else {
							animation.translate(speedx,'-12vh').step()
						}
						next = !next;
						this.animationData = animation.export()
					}, 600)
				},4000)		
			},

			// 直接飞走函数
			endfly(){
				clearTimeout(timer)
				this.flydown = false
				clearInterval(js)
				animation = uni.createAnimation({				
					duration: this.sppedtime,
					timingFunction: 'ease'				
				})
				animation.translate(this.syswidth * 1.5,'-30vh').step()
				this.animationData = animation.export()
			},
			
			// 重置对局
			init(){
				this.flydown = false
				clearInterval(js)
				animation = uni.createAnimation({				
					duration: 0,
					timingFunction: 'ease'				
				})
				animation.translate(0,0).step()
				this.animationData = animation
			},

			// 参与飞行
			join(){
				this.$u.toast('即将正式上线')
				return
				if(this.isinvest == 0) {
					// 手动投入
					let data = {
						type: "invest",
						data:{
							type:1,
							invest_num:this.value
						}
					}
					data = JSON.stringify(data)
					// 传递参数给服务器
					uni.sendSocketMessage({
						data: data
					});
				}
			},
			
			// 长链接
			getinfo() {
				let token = uni.getStorageSync('token');
				this.socketTask = uni.connectSocket({
					url: 'ws://xymx.heqx.top:2380?token=' + token,
					method: 'GET',
					complete: (res) => {
						uni.onSocketOpen((res) => {
							// 加入房间
							let data = {
								type: "index",
								data:{}
							}
							data = JSON.stringify(data)
							// 传递参数给服务器
							uni.sendSocketMessage({
								data: data
							});
							this.heart() // xintiao
							// 监听服务器返回的数据
							uni.onSocketMessage((res) => {
								let d = JSON.parse(res.data)
								switch (d.type) {
									case 'index':
										// 判断开局状态
										this.isstatus(d)
										break;
									case 'fly':
										// 起飞
										this.list2 = []
										if(this.isinvest == 1) {
											this.isinvest = 3
										}else {
											this.isinvest = 2
										}
										this.gamestatus = 2
										this.starfly(this.syswidth)
										break;
									case 'push':
										// 推数字
										this.eddval = d.data.meters
										break;
									case 'error':
									this.$u.toast(d.msg)
									break;
									case 'game_start':
										this.historyLog()
										// 开局
										this.isinvest = 0
										this.game_start(d);
										this.list2 = []
										this.list1 = []
										for (let i = 0; i < this.tablist2.length; i++) {
											this.tablist2[i].isrequest = false
										}
										break;
									case 'game_end':
										this.isinvest = 4
										this.gamestatus = 3
										// 结束
										this.endfly();
										break;
									case 'invest':
										// 投入成功
										this.isinvest = 1
										this.crystal = d.crystal;
										this.$u.toast(d.msg)
										this.tablist2[2].isrequest = false
										break;
									case 'list':
										// 投入成功返回数据列表
										this.pxlist(d)
										break;
									case 'income':
										// 投入成功
										this.crystal = d.data.crystal
										this.isinvest = 2
										this.$u.toast(`恭喜获得${d.data.income}水晶`)
										break;
								}
							});
						});
					},
					success: (res) => {

					},
				});

				// // 监听连接关闭 -
				this.socketTask.onClose((e) => {
					console.log('WebSocket连接关闭！');
					clearInterval(this.timer)
					this.timer = ''
					if(!this.isclose) {
						this.getinfo()
					}
				})

				this.socketTask.onError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
					//进入重新连接
					this.getinfo()
				})
			},

			//心跳
			heart() {
				clearInterval(this.timer);
				this.timer = '';
				let msg = {
					type: "heartbeat",
					data:{}
				}
				this.timer = setInterval(() => {
					// 传递参数给服务器
					uni.sendSocketMessage({
						data: JSON.stringify(msg)
					});
				}, 30000)
			},

			// 判断进来时的状态。
			isstatus(data){
				// console.log(data);
					this.list1 = []
					this.list2 = []
					this.crystal = data.data.crystal
					let uid = uni.getStorageSync('id')
					this.checked1 = data.data.auto_settlement_switch
					this.setm = data.data.auto_settlement
					this.value = Number(data.data.auto_join)
					console.log(this.value);
					this.$forceUpdate()
					// console.log(this.checked1);
					for (let i = 0; i < data.data.list.length; i++) {
						if(data.data.list[i].user_id == uid) {
							this.list1.push(data.data.list[i])
							// console.log(this.list1);
						}else {
							this.list2.push(data.data.list[i])
						}
					}
					// console.log(this.list2);
				// 未开局时
				if(data.data.status == 0) {
					if(data.data.invest_status == 0) {
						this.isinvest = 0
					}else {
						this.isinvest = 1
					}
					this.gamestatus = 1
					
					let time = parseInt(new Date().getTime()/1000) 
					this.second = 10 - (Number(time) - Number(data.data.start_time) )
					clearInterval(timer2)
					timer2 = setInterval(() => {
						this.second--
						if(this.second <=0) {
							this.second = 0
							clearInterval(timer2)
						}
					}, 1000);
				}else if(data.data.status  == 1) {
					// 开局时
					this.gamestatus = 2
					this.starfly(this.syswidth)
					if(data.invest_status == 0) {
						this.isinvest = 2
					}else if(data.invest_status == 1) {
						this.isinvest = 1
					}else if(data.income_status == 1) {
						this.isinvest = 3
					}else {
						this.isinvest = 2
					}
				}else if(data.data.status  == 2) {
					// 结束时
					this.gamestatus = 3
					this.endfly();
					this.isinvest = 2
					this.eddval = data.data.meters
					// if(data.invest_status == 0) {
					// 	this.isinvest = 2
					// }else if(data.income_status == 1) {
					// 	this.isinvest = 3
					// }
				}
			},


			// 领取奖励
			receive(){
				
				let data = {
					type: "income",
					data:{}
				}
				data = JSON.stringify(data)
				// 传递参数给服务器
				uni.sendSocketMessage({
					data: data
				});
			},




			// input失去焦点传入设置的值  设置自动下车的值
			handleBlur(){
				// console.log(this.setm);
				if(this.setm <= 1) {
					this.$u.toast('请输入正确的数值');
					this.setm = 1.1
				}else {
					this.$nextTick(() => {
						this.setm = Number(this.setm).toFixed(2)
					});
					// 设置自动领奖
					let data = {
						type: "setting",
						data:{
							type:2,
							num:this.setm,
							isopen:this.checked1
						}
					}
					data = JSON.stringify(data)
					// 传递参数给服务器
					uni.sendSocketMessage({
						data: data
					});
				}
			},

			// 监听步进器加减
			valChange(){
				this.$u.toast('即将正式上线')
				return
				// console.log(this.value);
				// 设置自动领奖数值
					let data = {
						type: "setting",
						data:{
							type:1,
							num:this.value
						}
					}
					data = JSON.stringify(data)
					// 传递参数给服务器
					uni.sendSocketMessage({
						data: data
					});
			},

			// 开始倒计时
			game_start(d){
				// 飞机重置
				this.init()
				// 倒计时
				this.gamestatus = 1
				let time = parseInt(new Date().getTime()/1000) 
				this.second = 10 - (Number(time) - Number(d.data.start_time) )
				clearInterval(timer2)
				timer2 = setInterval(() => {
					this.second--
					if(this.second <=0) {
						this.second = 0
						clearInterval(timer2)
					}
				}, 1000); 
				this.eddval = 1.00

				// 判断是否自动投入
				if(!!this.checked2) {
					// 手动投入
					let data = {
						type: "invest",
						data:{
							type:2,
							invest_num:this.value
						}
					}
					data = JSON.stringify(data)
					// 传递参数给服务器
					uni.sendSocketMessage({
						data: data
					});
				}
			},

			// 我投入时插入第一个
			pxlist(d) {
				let uid = uni.getStorageSync('id');
				if(d.data.user_id == uid) {
					this.list1 = []
					this.list1.push(d.data)
					// console.log(this.list1);
				}else {
					this.list2.unshift(d.data)
				}
			},

			// 自动参与状态变化
			swchange(){
				this.$u.toast('即将正式上线')
				return
				// console.log(this.checked2);
				if( !!this.checked2 && this.isinvest == 0 && this.gamestatus == 1) {
					// 手动投入
					let data = {
						type: "invest",
						data:{
							type:1,
							invest_num:this.value
						}
					}
					data = JSON.stringify(data)
					// 传递参数给服务器
					uni.sendSocketMessage({
						data: data
					});
				}
			},
			
			// 自动领奖
			reswchange(){
				this.$u.toast('即将正式上线')
				return
				// 设置自动领奖
					let data = {
						type: "setting",
						data:{
							type:3,
							isopen:this.checked1
						}
					}
					data = JSON.stringify(data)
					// 传递参数给服务器
					uni.sendSocketMessage({
						data: data
					});
			},

			// 获取参与记录
			async getJoinLog(){
				let res = await this.$http.index.flygetJoinLog({
					page:this.joinpage
				});
				this.joinlog = [...this.joinlog , ...res.data.data];
				this.joinmax_page = res.data.last_page
				if (this.joinpage > this.joinmax_page || this.joinpage == this.joinmax_page) this.status = 'nomore';
			},
			// 获取历史记录
			async historyLog(){
				let res = await this.$http.index.historyLog();
				this.history = res.data
			},

			// 降落统计
			async landing(type , stat2){
				let res = await this.$http.index.landing({
					type:type
				})
				this.landinglist[stat2] = res.data
				this.tablist2[stat2 -1].isrequest = true
			},



			// 我的记录，
			scrolltolower(){
				if (this.joinpage >= this.joinmax_page) {
					this.status = 'nomore'
					return;
				}
				this.status = 'loading';
				this.joinpage = ++this.joinpage;
				this.getJoinLog()
				setTimeout(() => {
					if (this.joinpage > this.joinmax_page || this.joinpage == this.joinmax_page) this.status = 'nomore';
					else this.status = 'loading';
				}, 500)
			},

		},
	}
</script>

<style lang="less">

.zone {
	background: url('http://img.cpgm.cc/panda/static/game/flybg.png') no-repeat #52588E;
	background-size: 100% auto;
	background-position-y: top;
	min-height: 100vh;
	overflow: hidden;
}

.nav-bar2 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 60px;
	padding: 0px 10px;
}

.n_left {
	width: 100%;
	display: flex;
	align-items: flex-end;
	text {
		color: rgba(255, 255, 255, 0.8);
		font-size: 12px;
		margin-left: 5px;
		margin-bottom: 10px;
	}
	image {
			width: 35%;
			margin-left: 5px;
		}
}

.shouxu {
	color: #fff;
	font-size: 14px;
}

.top {
	height: 26vh;
	position: relative;

	.boy {
		width: 90px;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 9;
	}

	.bai {
		width: 200px;
		position: absolute;
		bottom: -58%;
		left: -34%;
		z-index: 1;
	}
}




.center {
	position: relative;
	background: #52588E;
	z-index: 99;
	height: calc(74vh - 60px);
}

.log {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	border-bottom: 1px solid rgba(255,255,255,0.25);
	
}

.logitem {
	width: 14%;
	height: 30px;
	line-height: 30px;
	background: rgba(0,0,0,0.4);
	border-radius: 12px;
	text-align: center;
	color: #fff;
	font-size: 12px;
}
.visbility {
	visibility: hidden;
}

.lslog {
	width: 20%;
	height: 30px;
	line-height: 30px;
	background: rgba(0,0,0,0.4);
	border-radius: 12px;
	text-align: center;
	color: #fff;
	font-size: 12px;

	image {
		width: 10px;
		margin-left: 2px;
	}
}

// tab导航
	.tab {
		display: flex;
		align-items: center;
		background: rgba(255,255,255,0.7);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		border-radius: 5px;
		overflow: hidden;
		margin: 10px auto;
		border-radius: 7px;
		margin: 10px ;
		background: rgba(0,0,0,0.3);
		border-radius: 16px;
		overflow: hidden;

		view {
			width: 50%;
			height: 38px;
			text-align: center;
			line-height: 38px;
			color: rgba(255, 255, 255, 0.8);
			font-size: 13px;
			font-weight: 600;
			border-radius: 16px;
		}
	}
	.active {
		color: #453273 !important;
		background: linear-gradient(180deg, #FDFCFF 0%, #D8D7FF 100%) !important;
	}


.timetab {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;

	view {
		width: 30%;
		text-align: center;
		color: rgba(255, 255, 255, 0.6);
	}
}
.active2 {
	color: #fff !important;
	position: relative;
}

.active2::before {
	content: '';
	position: absolute;
	bottom: -5px;
	left: calc(50% - 7px) ;
	width: 14px;
	height: 2px;
	background: #fff;
}

.time_ex {
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	text-align: center;
	margin-top: 8px;
}


.mart20 {
	margin: 20px 0;
}


.play {
	position: absolute;
	right: 0;
	width: 54px;
	height: 27px;
	background:  rgba(0,0,0,0.6);
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1);
	border-radius: 14px 0px 0px 14px;
	color: #fff;
	text-align: center;
	line-height: 27px;
	z-index: 999;
}


.posanum {
	position: absolute;
	left: 50%;
	top: 28%;
	transform: translateX(-50%);
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: center;

	p {
		color: #fff;
		font-size: 14px;
	}

	text {
		font-size: 45px !important;
		font-weight: bold !important;
		color: #FFFFFF !important;
		line-height: 72px !important;
		-webkit-text-stroke: 1px #3F371D !important;
		text-stroke: 1px #3F371D !important;
		background: linear-gradient(180deg, #FCFCFF 0%, #FFDD93 100%) !important;
		-webkit-background-clip: text !important;
		-webkit-text-fill-color: transparent !important;
	}
}

::v-deep .u-count-num {
	font-size: 54px !important;
	font-weight: bold !important;
	color: #FFFFFF !important;
	line-height: 72px !important;
	-webkit-text-stroke: 1px #3F371D !important;
	text-stroke: 1px #3F371D !important;
	background: linear-gradient(180deg, #FCFCFF 0%, #FFDD93 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}




.expalin {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;

	text {
		color: #fff;
		font-size: 12px;
	}

	text:nth-child(2){
		margin-left: 15%;
	}
}

.center {

}
.scrollbox {
	height: calc(74vh - 340px);
}

.list {
	padding: 10px;

	.item {
		background: rgba(255,255,255,0.2);
		border-radius: 5px;
		padding: 5px 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 5px 0;

		.info {
			display: flex;
			align-items: center;

			image {
				width: 30px;
				border-radius: 50%;
				margin-right: 4px;
			}
			text {
				width: 80px;
				color: #fff;
				white-space: nowrap;/*不允许换行*/
				overflow: hidden;/*超出隐藏*/
				text-overflow: ellipsis;/*文本超出三点代替*/
				font-size: 12px;
			}
		}

		.numbox {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 12px;
			flex: 1;
			justify-content: center;

			image {
				width: 10px;
				margin-right: 2px;
			}
		}
		.distance {
			color: #fff;
			font-size: 12px;
			flex: 1;
			text-align: center;
		}

		.rwnum {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 12px;
			flex: 1;
			justify-content: end;

			image {
				width: 10px;
				margin-right: 2px;
			}
		}
	}
}

.clist {
	padding: 1px 0;
}

.expalin2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;

	text {
		color: #fff;
		font-size: 12px;
	}

	text:nth-child(2){
	}
}

.item3 {
	background: rgba(255,255,255,0.2);
	border-radius: 5px;
	padding: 5px 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 5px 0;

	
	.numbox {
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 12px;
		flex: 1;
		justify-content: flex-start;

		image {
			width: 10px;
			margin-right: 2px;
		}
	}
	.distance {
		color: #fff;
		font-size: 12px;
		flex: 1;
		text-align: center;
	}

	.rwnum {
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 12px;
		flex: 1;
		justify-content: center;

		image {
			width: 10px;
			margin-right: 2px;
		}
	}

	.time3 {
		color: #fff;
		font-size: 12px;
		flex: 1.1;
		word-break: break-all;
	}
}


.controller {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 100%;
	color: #fff;
}

.bottom {
	background: linear-gradient(180deg, #D6D4FF 0%, #FFFFFF 100%);
	border-radius: 15px 15px 0px 0px;
	padding: 10px;
	position: absolute;
	bottom: 0;
	width: 100%;
}

.formbox {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.f_left {
	display: flex;
	align-items: center;
	text {
		color: #343434;
		font-weight: 600;
	}
}

.switch {
	margin-left: 10px;
}

.ipbox {
	width: 54px;
	background: linear-gradient(180deg, #313145 0%, #20222E 100%);
	border-radius: 4px;
	border: 1px solid #21232F;
	margin-left: 10px;
	display: flex;
	align-items: center;
	color: #fff;
	padding: 2px 4px;

	input {
		flex: 1;
		color: #fff;
		text-align: center;
		font-size: 12px;
	}
	text {
		color: #fff;
		font-size: 12px;
	}
}


/deep/ .u-switch--on {
	background: linear-gradient(180deg, #FE5C4F 0%, #FF4A65 100%) !important;
}

/deep/ .u-switch__node{
	background: linear-gradient(180deg, #DAD9FF 0%, #FBFAFF 100%) !important;
	box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,1)  !important;
}


.join {
	background: #FFFFFF;
	border-radius: 4px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 5px;

	.button {
		width: 72px;
		height: 33px;
		background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		color: #fff;
	}
}

.j_left {
	display: flex;
	align-items: center;
	image {
		width: 20px;
		margin-right: 10px;
	}
}


::v-deep .u-icon-minus {
	border-radius: 50%;
	width: 20px !important;
	height: 20px !important;
}
::v-deep .u-icon-plus {
	border-radius: 50%;
	width: 20px !important;
	height: 20px !important;
}

/deep/ .uicon-plus {
	color: #000000;
	font-size: 12px !important;
	font-weight: 600 !important;
}

/deep/ .uicon-minus {
	color: #000000;
	font-size: 12px !important;
	font-weight: 600 !important;
}

.residue {
	margin-top: 5px;
	
	p {
		font-size: 12px;
		text {
			color: #FF2F00;
		}
	}
}



.mymask {
	background: rgba(0,0,0,0.6);
	height: 100%;
}

.mymask {
	position: absolute;
	width: 100%;
	height: calc(74vh - 60px);
	top: 0;
	left: 0;
	z-index: 88;
}

.m_content {
	position: absolute;
	top: 0;
	min-height: 20vh;
	width: 100%;
	padding: 10px;
	background: linear-gradient(180deg, #52588E 0%, #2E355C 100%);
	box-shadow: inset 0px -2px 0px 0px rgba(0,0,0,0.25);
	border-radius: 0px 0px 20px 20px;
}

.flexwarp {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	.logitem {
		margin: 2px 1.3%;
	}
}

.flexend {
	display: flex;
	align-items: center;
	justify-content: end;
}






.scrollbox2 {
	height: calc(74vh - 340px);
}

.item2 {
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.2);
	border-radius: 5px;
	padding: 5px 10px;
	margin: 5px 0;

	.lv {
		width: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
		color: #FFFFFF;

		image {
			width: 100%;
		}
	}

	.howm {
		width: 40%;
		display: flex;
		align-items: center;
		text {
			color: #fff;
		}
	}

	.time2 {
		color: #fff;
		font-size: 12px;
	}
}

.grey {
	filter: grayscale(1);
}


/deep/ .u-more-text {
	color: rgba(255, 255, 255, 0.8) !important;
}




.flex1 {
	flex: 1;
	display: flex;
	align-items: center;

	.logitem {
		width: 19%;
		margin: 0 1%;
	}
}











</style>
